<template>
    <div class="emergency">
        <div class="content">
            <div class="texts">
                <i class="icon-pointer"></i>
                <h3><span>{{ $t("index-home.M001") }}</span></h3>
                <p>{{ $t("index-home.M002") }}</p>
                <div>
                    <router-link to="/emergency">{{ $t("sidebar.M018") }}</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.emergency {
    padding: 12px;
    background-color: $c_3;
    font-size: $fs_2;
}

.content {
    border: 1px $c_16 solid;
    border-radius: 2px;
    padding: 20px 20px 10px;
}

.texts {
    border-left: 2px $c_13 solid;
    padding: 0 20px 10px 18px;
    position: relative;

    .icon-pointer {
        position: absolute;
        left: -5px;
        top: -8px;
    }

    h3 {
        color: $c_15;
        font-size: $fs_3;
        position: relative;
        height: 20px;
        span {
            position: absolute;
            top: -5px;
            display: inline-block;
        }

    }

    p {
        line-height: 2;
    }

    a {
        display: inline-block;
        color: $c_2;
        font-size: $fs_3;
        line-height: 36px;
        border: 1px $c_2 solid;
        padding: 0 4px;
        width: 110px;
        text-align: center;
        margin-top: 10px;

        &:hover {
            background-color: $c_2;
            color: $c_3;
        }
    }
}
</style>